<template>
	<view class="mine-page">
		<view class="user-section">
			<view class="user-avatar">
				<image :src="userInfo.avatar" class="avatar-img" @error="handleAvatarError"></image>
			</view>
			<view class="user-info">
				<text class="username">{{ userInfo.nickname || '点击登录' }}</text>
				<text class="user-desc">{{ userInfo.desc || '欢迎使用图片处理助手' }}</text>
			</view>
			<view class="user-stats">
				<view class="stat-item">
					<text class="stat-number">{{ userStats.processedCount }}</text>
					<text class="stat-label">处理图片</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-number">{{ userStats.savedCount }}</text>
					<text class="stat-label">保存作品</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-number">{{ userStats.toolsUsed }}</text>
					<text class="stat-label">使用工具</text>
				</view>
			</view>
		</view>
		
		<view class="menu-section">
			<view class="menu-group">
				<text class="group-title">常用功能</text>
				<view class="menu-item" @click="handleMenuClick('favorites')">
					<view class="menu-left">
						<image src="../../static/images/common/sc.png" class="menu-icon"></image>
						<text class="menu-title">我的收藏</text>
					</view>
					<text class="arrow-icon">></text>
				</view>
				<view class="menu-item" @click="handleMenuClick('history')">
					<view class="menu-left">
						<image src="../../static/images/common/sc.png" class="menu-icon"></image>
						<text class="menu-title">处理历史</text>
					</view>
					<text class="arrow-icon">></text>
				</view>
				<view class="menu-item" @click="handleMenuClick('gallery')">
					<view class="menu-left">
						<image src="../../static/images/common/sc.png" class="menu-icon"></image>
						<text class="menu-title">作品相册</text>
					</view>
					<text class="arrow-icon">></text>
				</view>
			</view>
			
			<view class="menu-group">
				<text class="group-title">设置与帮助</text>
				<view class="menu-item" @click="handleMenuClick('settings')">
					<view class="menu-left">
						<image src="../../static/images/common/settings.png" class="menu-icon"></image>
						<text class="menu-title">设置</text>
					</view>
					<text class="arrow-icon">></text>
				</view>
				<view class="menu-item" @click="handleMenuClick('help')">
					<view class="menu-left">
						<image src="../../static/images/common/sc.png" class="menu-icon"></image>
						<text class="menu-title">使用帮助</text>
					</view>
					<text class="arrow-icon">></text>
				</view>
				<view class="menu-item" @click="handleMenuClick('feedback')">
					<view class="menu-left">
						<image src="../../static/images/common/sc.png" class="menu-icon"></image>
						<text class="menu-title">意见反馈</text>
					</view>
					<text class="arrow-icon">></text>
				</view>
				<view class="menu-item" @click="handleMenuClick('about')">
					<view class="menu-left">
						<image src="../../static/images/common/sc.png" class="menu-icon"></image>
						<text class="menu-title">关于我们</text>
					</view>
					<text class="arrow-icon">></text>
				</view>
			</view>
		</view>
		
		<view class="version-info">
			<text class="version-text">图片处理助手 v{{ appVersion }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '../../static/images/common/sc.png',
					nickname: '',
					desc: ''
				},
				userStats: {
					processedCount: 0,
					savedCount: 0,
					toolsUsed: 0
				},
				appVersion: '1.0.0'
			}
		},
		onLoad() {
			this.loadUserInfo();
			this.loadUserStats();
		},
		methods: {
			loadUserInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						this.userInfo = { ...this.userInfo, ...userInfo };
					}
				} catch (e) {
					console.log('获取用户信息失败:', e);
				}
			},
			
			loadUserStats() {
				try {
					const stats = uni.getStorageSync('userStats');
					if (stats) {
						this.userStats = { ...this.userStats, ...stats };
					}
				} catch (e) {
					console.log('获取用户统计失败:', e);
				}
			},
			
			handleAvatarError() {
				this.userInfo.avatar = '../../static/images/common/sc.png';
			},
			
			handleMenuClick(type) {
				switch (type) {
					case 'favorites':
						this.showToast('我的收藏功能开发中');
						break;
					case 'history':
						this.showToast('处理历史功能开发中');
						break;
					case 'gallery':
						this.showToast('作品相册功能开发中');
						break;
					case 'settings':
						this.showToast('设置功能开发中');
						break;
					case 'help':
						this.showToast('使用帮助功能开发中');
						break;
					case 'feedback':
						this.showToast('意见反馈功能开发中');
						break;
					case 'about':
						uni.showModal({
							title: '关于我们',
							content: '图片处理助手是一款专业的图片处理工具集合，为用户提供丰富的图片编辑功能。',
							showCancel: false
						});
						break;
					default:
						this.showToast('功能开发中');
				}
			},
			
			showToast(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		min-height: 100vh;
		background-color: #f7f8fa;
		padding: 40rpx 30rpx;
	}
	
	.user-section {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 32rpx;
		padding: 50rpx 40rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.25);
		
		.user-avatar {
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			
			.avatar-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(255,255,255,0.3);
				box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
			}
		}
		
		.user-info {
			text-align: center;
			margin-bottom: 40rpx;
			
			.username {
				display: block;
				color: #fff;
				font-size: 36rpx;
				font-weight: 700;
				margin-bottom: 12rpx;
			}
			
			.user-desc {
				display: block;
				color: rgba(255,255,255,0.8);
				font-size: 28rpx;
			}
		}
		
		.user-stats {
			display: flex;
			align-items: center;
			justify-content: center;
			
			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				
				.stat-number {
					color: #fff;
					font-size: 32rpx;
					font-weight: 700;
					display: block;
					margin-bottom: 8rpx;
				}
				
				.stat-label {
					color: rgba(255,255,255,0.8);
					font-size: 24rpx;
					display: block;
				}
			}
			
			.stat-divider {
				width: 2rpx;
				height: 60rpx;
				background: rgba(255,255,255,0.3);
				margin: 0 30rpx;
			}
		}
	}
	
	.menu-section {
		.menu-group {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
			overflow: hidden;
			
			.group-title {
				display: block;
				padding: 30rpx 40rpx 20rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #666;
				border-bottom: 2rpx solid #f5f5f5;
			}
			
			.menu-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx;
				border-bottom: 2rpx solid #f8f9fa;
				transition: background-color 0.3s ease;
				
				&:last-child {
					border-bottom: none;
				}
				
				&:active {
					background-color: #f8f9fa;
				}
				
				.menu-left {
					display: flex;
					align-items: center;
					
					.menu-icon {
						width: 44rpx;
						height: 44rpx;
						margin-right: 30rpx;
						opacity: 0.7;
					}
					
					.menu-title {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
					}
				}
				
				.arrow-icon {
					font-size: 24rpx;
					color: #999;
					font-weight: 600;
				}
			}
		}
	}
	
	.version-info {
		text-align: center;
		padding: 40rpx 0;
		
		.version-text {
			color: #999;
			font-size: 24rpx;
		}
	}
</style>